﻿@model IEnumerable<Tag>
@{
    Ajax.Dna().Widget()
        .Preview(@<text>
    <div style="overflow: auto; min-height: 5px; padding: 5px;">
        <a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                DotNetAge</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Web2.0</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                jQuery</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: medium;
                border: none; background: none; vertical-align: bottom;">
                SEO</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Installation</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Quick start</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                publishing</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Personal web site</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Architecture</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                DJME</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Mvc</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                DJ</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                ASP.NET</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                WebControls</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                DNA</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                jQuery UI</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                framework</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                codeplex</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                download</div>
        </a><a style="vertical-align: bottom; display: inline-block;" target="_blank" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                ScriptManager</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                UI Designers</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                WLW</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Windows Live Writer</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                widget</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Tutorial</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                DJME2</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Theme</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Web Design</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Baidu</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Google</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Adwords</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Traffic</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Bookmarking</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Content</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Html5</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                DNA2</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                DynamicUI</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                User guide</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                WebResource Manager</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                WidgetEngine</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: medium;
                border: none; background: none; vertical-align: bottom;">
                DotNetAge2</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                SNS</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                FOAF</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                RSD</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Screenshot</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Mechine key</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                RoleManager</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Form Auth</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                cookies</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Last-Modified</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                ETag</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Mvc3</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Cache</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Preformance</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                server</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                css</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                javascript</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                cookie</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                images</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                moblie</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Features</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Razor</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                OpenID</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                DotNetOpenAuth</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                OpenSearch</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                SearchEngine</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Release notes</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Composite</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Decorator</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Facade</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Flyweight</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Proxy</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Command</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Chain</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Interpreter</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Iterator</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Mediator
            </div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Memento</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Observer</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                State</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Strategy</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Visitor</div>
        </a><a style="vertical-align: bottom; display: inline-block;" href="javascript:void(0);">
            <div style="float: left; font-weight: normal; margin-left: 5px; font-size: smaller;
                border: none; background: none; vertical-align: bottom;">
                Template Method
            </div>
        </a>
    </div>
    </text>)
          .Content(@<text>
    @{ 
        int count = (int)ViewData["Count"];
        int limit = item.GetInt("MaximumTags");
        int i = 0;
    }
    @if (count > 0)
    { 
        <div style="overflow: auto; min-height: 5px; padding: 5px;">
            @foreach (var tag in Model)
            {
                if (limit != -1)
                {
                    if (i >= limit)
                    {
                        continue;
                    }
                }
                var presentage = (Convert.ToDouble(tag.Count) / Convert.ToDouble(count)) * 100;
                string style = "float: left;font-weight:normal;margin-left:5px;";

                if (presentage <= 10)
                {
                    style += "font-size:smaller;";
                }

                if ((presentage > 10) && (presentage <= 30))
                {
                    style += "font-size:medium;";
                }

                if ((presentage > 30) && (presentage <= 50))
                {
                    style += "font-size:larger;";
                }
                if ((presentage > 50) && (presentage <= 70))
                {
                    style += "font-size:large;font-weight:bold;";
                }
                if (presentage > 70)
                {
                    style += "font-size:x-large;font-weight:bold;";
                }
                var builder = new TagBuilder("div");
                builder.Attributes.Add("style", style + "border:none;background:none; vertical-align: bottom;");
                builder.InnerHtml = tag.Name;
                <a href="@(UrlResolver.Resolve(Context) + "/publishing/" + WebSiteContext.Current.Web.Name + "/tags/" + tag.Name)" target="_blank" style="vertical-align: bottom; display: inline-block;">
                    @MvcHtmlString.Create(builder.ToString())
                </a>
                i++;
            }
        </div>
        @Html.StartupScripts() 
    }
    else
    {
        <div style="padding: 10px;">
            @Html.Global("Publishing", "NoTags")</div>
    }
    </text>)
          .Render();

}
